<template>
    <div class="user-home-container">
        <div class="section-header">
            <div class="section-title">
                <v-icon color="#7C9CBF" size="medium" class="mr-2">mdi-movie-open</v-icon>
                <span class="text-h6 font-weight-medium">我的视频</span>
            </div>
            <v-divider class="section-divider mt-2 mb-4" />
        </div>
        
        <VideoListVue :video-list="videoList"/>
        
        <div class="pagination-container mt-4">
            <v-pagination
                v-if="pageInfo.pages>1"
                v-model="pageInfo.page"
                :length="pageInfo.pages"
                color="#7C9CBF"
                active-color="#7C9CBF"
                variant="elevated"
                rounded="lg"
                class="modern-pagination"
            ></v-pagination>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { apiGetUserVideoById } from '../../../apis/video';
import VideoListVue from '../../../components/video/list.vue';
import { useUserStore } from '../../../stores';
const userStore = useUserStore()
const videoList = ref([])
const pageInfo = ref({
    page: 1,
    pages: 0
})
const getVideo = ()=>{
    apiGetUserVideoById(userStore.$state.lookId, pageInfo.value.page).then(({data})=>{
        if(!data.state){
            return
        }
        pageInfo.value.pages = data.data.pages
        videoList.value = data.data.records
    })
}
watch(()=>pageInfo.value.page, ()=>{
    getVideo()
}, {immediate:true})
</script>
<style scoped>
.user-home-container {
  padding: 10px;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
}

.section-divider {
  background: linear-gradient(90deg, rgba(124, 156, 191, 0.5), transparent);
  height: 1px;
  position: relative;
}

.section-divider::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 30px;
  height: 3px;
  background: #7C9CBF;
  border-radius: 3px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.modern-pagination :deep(.v-pagination__item) {
  transition: all 0.3s ease;
  border: 1px solid rgba(124, 156, 191, 0.2);
  background: rgba(124, 156, 191, 0.05);
}

.modern-pagination :deep(.v-pagination__item--is-active) {
  transform: scale(1.1);
  background: rgba(124, 156, 191, 0.2);
  border: 1px solid rgba(124, 156, 191, 0.3);
  font-weight: 600;
}

.modern-pagination :deep(.v-pagination__item:hover) {
  background: rgba(124, 156, 191, 0.1);
  transform: translateY(-2px);
}

.modern-pagination :deep(.v-pagination__navigation) {
  border: 1px solid rgba(124, 156, 191, 0.2);
  background: rgba(124, 156, 191, 0.05);
}

.modern-pagination :deep(.v-pagination__navigation:hover) {
  background: rgba(124, 156, 191, 0.1);
  transform: translateY(-2px);
}
</style>